<template>
	<el-card style="width: 100%">
		<el-form-item label="类型">
			<el-select v-model="form.type">
				<el-option label="默认" value="default"></el-option>
				<el-option label="达梦" value="dm"></el-option>
				<el-option label="NC" value="oracle"></el-option>
				<el-option label="MySql" value="mysql"></el-option>
				<el-option label="OA" value="sqlserver"></el-option>
				<el-option label="FAMS" value="oldfams"></el-option>
				<el-option label="CMDB" value="cmdb"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="语句">
			<el-input v-model="form.sql" type="textarea" :rows="5" clearable></el-input>
		</el-form-item>
		<el-button @click="execute" :loading="loading">执行</el-button>
	</el-card>

    <el-card v-if="resData" style="width: 100%">
      <div style="width: 100%;text-align: right;margin-top: -10px;"><el-button link @click="showJson=false">常规</el-button> <el-button link @click="showJson=true">JSON</el-button></div>
      <template v-if="showJson">
      <json-viewer v-if="resData"
                   :value="resData"
                   style="width: 100%; min-width: 3.125rem"
                   :expand-depth="10"
                   copyable
                   boxed
                   sort
      />
      </template>
      <template v-else>
          {{resData}}
      </template>
    </el-card>


</template>

<script>

import ExCascader from "@/components/exCascader/index.vue";

export default {
	name: 'role',
	components: {ExCascader},
	data() {
		return {
			loading: false,
			form: {
				type: null,
				sql: null,
			},
			resData: null,
      showJson:false,
		}
	},
	created() {
	},
	mounted() {
	},
	methods: {
		//批量启用
		async execute() {
			this.loading = true;
			try {
        this.resData=null;
				let res = await this.$API.system.dataQuery.execute.post(this.form);
				if (res.code === 2000) {
					this.resData = res.data;
				} else {
					this.resData = res.msg;
				}
			} finally {
				this.loading = false;
			}
		},
	}
}
</script>
